<template>
  <div id="app">
    <h3 class="time">{{time.text}}</h3>
    <div class="btn" @click="showDate = true">点击选择时间</div>

    <van-action-sheet v-model="showDate">
      <marDatePicker
        @cancel="showDate = false"
        @confirm="clickDataBox"
        title="请选择问题发生时间"
        :default-date="time.val"
        :max-date="maxDate"
        :min-date="minDate"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import marDatePicker from '@/components/marDatePicker.vue';
export default {
  components: {
    marDatePicker
  },
  data () {
    return {
      maxDate: new Date(),
      minDate: new Date(Date.now() - 1000 * 60 * 60 * 24 * 50),
      time: {
        text: '',
        val: new Date()
      },
      showDate: false
    }
  },
  watch: {
    'time.val': {
      handler (newval) {
        const year = newval.getFullYear()
        let month = newval.getMonth()
        let day = newval.getDate()
        let hour =
          newval.getHours() < 10
            ? '0' + newval.getHours()
            : '' + newval.getHours()
        let minute =
          newval.getMinutes() < 10
            ? '0' + newval.getMinutes()
            : '' + newval.getMinutes()
        this.time.text = 'year-month-day hour：minute';
      },
      immediate: true
    }
  },
  methods: {
    clickDataBox (value) {
      this.time.val = value
      this.showDate = false
    }
  }
}
</script>
<style lang="less">
#app {
}
</style>
